---
title: Avatar
description: An image element with a fallback for representing the user.

links:
  doc: https://base-ui.com/react/components/avatar#api-reference
---

<ComponentPreview name="p-avatar-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/avatar
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui-components/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="avatar" title="components/ui/avatar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
```

```tsx
<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

## Examples

### Fallback Only

<ComponentPreview name="p-avatar-2" />

### Different Sizes

<ComponentPreview name="p-avatar-3" />

### Different Radius

<ComponentPreview name="p-avatar-4" />

### Group Avatars

<ComponentPreview name="p-avatar-5" />

## Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with **coss ui** quickly.

### Quick Checklist

- If you used `asChild` on parts, switch to the `render` prop
